<template>
  <div class="work-detail-wrap">

    <div class="carousel-box">
      <swiper :options="swiperOption" class="work-carousel" ref="mySwiper" v-if=slideList.length>
        <swiper-slide v-for="(slide,index) in slideList" :key="index">
          <img :src="slide" class="carousel"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <img src="./back2.png" class="pic1" @click="toBack"/>
    </div>

    <div class="company-box">
      <div class="item-con">
        <span class="work-type">{{workName}}</span>
        <span class="work-money">{{workMoney}}</span>
      </div>
      <div class="item-con">
        <div class="lend-money" v-if="lendType == 1">可借支</div>
        <div class="fee-box" v-if="reMoney > 0">
          <span class="fee-title">返费</span>
          <span class="fee">{{reMoney}}</span>
        </div>
      </div>
      <div class="item-con">
        <img src="./company.png" class="pic2"/>
        <span class="company-name">{{mechanismName}}</span>
      </div>
    </div>
    <div class="salary-box">
      <span class="headline">薪资说明：</span>
      <div class="content" v-html="workSalary"></div>
      <span class="explain-title" v-if="this.reMoney && this.reTime">返费说明：</span>
      <div class="fee-explain" v-html="feeExplain"></div>
    </div>

    <div class="sleep-box">
      <span class="headline">食宿说明：</span>
      <div class="content" v-html="eatSleep"></div>
    </div>

    <div class="invite-box">
      <span class="headline">招聘要求：</span>
      <div class="content" v-html="workDemand"></div>
    </div>

    <div class="enterprise-box">
      <span class="headline">企业简介：</span>
      <span v-html="brief"></span>
      <span>地址: {{briefAddr}}</span>
    </div>

    <div class="btn-box">
      <button type="button" class="service" @click="toBack">返回编辑</button>
      <button type="button" class="entry" @click="issueWork">发&nbsp;&nbsp;布</button>
    </div>
  </div>
</template>

<script>
  import {insertWork, queryMechanismList} from "../../../axios/api"
  import {getSessionStore, removeSessionStore} from "../../../config/util";

  export default {
    inject: ['reload'],
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          loop: true,
          observer: true,
          observeParents: true
        },
        workId: "",
        slideList: [],
        identity: "",
        lendType: "",
        workName: "",
        workMoney: "",
        workSalary: "",
        eatSleep: "",
        workDemand: "",
        brief: "",
        briefAddr: "",
        mechanismName: "",
        reTime: "",
        reMoney: "",
        mechanismId: "",
        workUrl: "",
        type: 0,//1新增 2修改,
        postType: "",
        feeExplain: ""
      }
    },
    mounted() {
      this.workId = this.$route.query.issueId;
      this.type = this.$route.query.type;
      this.identity = this.$store.getters.getIdentity;
      this.mechanismId = this.$route.query.mechanismId;
      this.mechanismName = this.$route.query.mechanismName;
      this.queryMechanism();
      this.initWork();
    },
    methods: {
      toBack() {//返回
        this.$router.push({
          path: "/workedit",
          query: {
            "mechanismId": this.mechanismId,
            "mechanismName": this.mechanismName,
            "type": this.type,
          }
        });
      },
      initWork() {//获取招聘信息
        let work = getSessionStore("work");
        if (work) {
          work = JSON.parse(work);
          this.workName = work.postName;
          this.workUrl = work.picture;
          this.postType = work.workType;
          this.workMoney = work.workType == 1 ? work.hourMoney + "元/小时" : `${work.startMoney}-${work.endMoney}` + "元/月";//工种1小时2正式;
          this.reMoney = work.returnFee; //返费金额
          this.reTime = work.picker; //返费时间（单位：月）

          if (this.reMoney && this.reTime) {
            let totalFee = this.reMoney * this.reTime.replace('个月', "");
            this.feeExplain = `入职考勤满一个月后，每个月可领取奖励${this.reMoney}元，可领取${this.reTime}，共${totalFee}元。返费金额会随着工厂招工情况随时变动，具体以入职时为准。`;
          }
        }
        let tempFood = getSessionStore("foodExplain");
        if (tempFood) {
          this.eatSleep = tempFood;//食宿
        }
        let tempSalary = getSessionStore("salaryExplain");
        if (tempSalary) {
          this.workSalary = tempSalary;//薪资
        }
        let tempWork = getSessionStore("workExplain");
        if (tempWork) {
          this.workDemand = tempWork;//招聘
        }
      },
      queryMechanism() {//获取企业信息
        this.$vux.loading.show({
          text: '加载中',
        });
        const params = {
          "sgin": this.identity,
          "mechanismId": this.mechanismId
        };
        queryMechanismList(params).then(res => {
          this.$vux.loading.hide();
          if (res.code == 0) {
            this.lendType = res.data[0].lendStatus;
            this.brief = res.data[0].mechanismDetails;
            this.briefAddr = res.data[0].mechanismAddress;
            let pic = res.data[0].mechanismUrl;//处理图片
            if (pic) {
              this.slideList = pic.split(",");
            }
          }
        });
      },
      issueWork() {//发布
        this.$vux.loading.show({
          text: '加载中',
        });

        let temp1 = "";
        let temp2 = "";
        if (this.postType == 2) {
          temp1 = this.workMoney.replace("元/月", "");
        } else {
          temp2 = this.workMoney.replace("元/小时", "");
        }
        let id = "";
        if (this.type == 2) {
          if (this.workId) {
            id = this.workId;
          }
        }

        let data = {
          "sgin": this.identity,
          "id": id,//招聘信息id（传id为修改，不传为新增）
          "mechanismId": this.mechanismId,//工厂id
          "workUrl": this.workUrl,//招聘封面
          "workTypeName": this.workName,//岗位
          "postType": this.postType == 2 ? 0 : this.postType,//0正式工 1小时工
          "wageRange": temp1,//正式工薪资范围
          "workMoney": temp2,
          "reMoney": this.reMoney,//返费
          "reTime": this.reTime.replace('个月', ""),//返费
          "workSalary": this.workSalary,//薪资说明
          "eatSleep": this.eatSleep,//食宿说明
          "workDemand": this.workDemand,//招聘要求
        };

        insertWork(data).then((res) => {
          if (res.code == 0) {
            if (res.data != 0) {
              this.clearCacheWork();
              this.$router.push("/issuework");
            } else {
              this.$vux.toast.text("发布失败，请重试", "middle");
            }
          }
        });
      },
      clearCacheWork() {//清除缓存
        removeSessionStore("work");
        removeSessionStore("foodExplain");
        removeSessionStore("salaryExplain");
        removeSessionStore("workExplain");
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .work-detail-wrap {
    .wh(100%, auto);
    background: @talent-theme-bg-color;
    .carousel-box {
      position: relative;
      .wh(100%, 7.507rem);
      .work-carousel {
        .wh(100%, 7.507rem);
        .carousel {
          .wh(100%, 100%);
        }
      }
      .pic1 {
        position: fixed;
        top: 0.24rem;
        left: 0.32rem;
        z-index: 1;
        .wh(0.747rem, 0.747rem)
      }
    }
    .company-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, 2.64rem);
      background: @talent-bg-color;
      .item-con {
        display: flex;
        justify-content: space-between;
        padding-left: 0.32rem;
        padding-right: 0.32rem;
        &:first-child {
          padding-top: 0.467rem;
          padding-bottom: 0.2rem;
        }
        &:last-child {
          justify-content: flex-start;
          align-items: center;
        }
        .work-type {
          .size-color-weight(0.4rem, rgba(51, 51, 51, 1), 500);
        }
        .work-money {
          .size-color-weight(0.4rem, rgba(255, 145, 38, 1), 500);
        }
        &:nth-child(2) {
          padding-bottom: 0.4rem;
        }
        .lend-money {
          .fj(center, center);
          .wh(1.12rem, 0.4rem);
          background: rgba(240, 246, 250, 1);
          .border-radius(0.053rem);
          .size-color(0.293rem, rgba(161, 171, 179, 1));
          line-height: 0.4rem;
        }
        .company-name {
          .size-color(0.347rem, rgba(102, 102, 102, 1));
        }
        .pic2 {
          .wh(0.4rem, 0.4rem);
          margin-right: 0.213rem;
        }
        .fee-box {
          display: flex;
          margin-left: auto;
          .wh(1.787rem, 0.4rem);
          .fee-title {
            .wh(0.72rem, 0.4rem);
            background: rgba(77, 207, 190, 1);
            border-radius: 0.053rem 0rem 0rem 0.053rem;
            .size-color(0.293rem, rgba(255, 255, 255, 1));
            text-align: center;
            line-height: 0.4rem;
          }
          .fee {
            text-align: center;
            line-height: 0.347rem;
            .wh(1.147rem, 0.347rem);
            border: 0.027rem solid rgba(77, 207, 190, 1);
            border-radius: 0rem 0.053rem 0.053rem 0rem;
            .size-color-weight(0.293rem, rgba(77, 207, 190, 1), 500);
          }
        }
      }
    }
    .salary-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
      .fee-explain {
        margin: 0 auto;
        padding-bottom: 0.48rem;
        width: 9.36rem;
        .size-color(0.373rem, rgba(255, 145, 38, 1));
        line-height: 0.48rem;
      }
      .explain-title {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color-weight(0.373rem, rgba(255, 145, 38, 1), 500);
      }
    }
    .sleep-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
    }
    .invite-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
    }
    .enterprise-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
        &:nth-child(2) {
          line-height: 0.44rem;
        }
        &:last-child {
          padding-bottom: 1.6rem;
        }
      }
    }
    .btn-box {
      position: fixed;
      bottom: 0;
      .fj(center, space-between);
      .wh(100%, 1.6rem);
      background: @talent-bg-color;
      .service {
        margin-left: 0.32rem;
        .wh(2.453rem, 1.013rem);
        border: 0.027rem solid rgba(255, 143, 51, 1);
        .border-radius(0.16rem);
        .size-color-weight(0.427rem, rgba(255, 143, 51, 1), 500);
        background: @talent-bg-color;
      }
      .entry {
        margin-right: 0.32rem;
        .wh(6.613rem, 1.067rem);
        background: rgba(255, 143, 51, 1);
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
